<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index</title>
  <link rel="stylesheet" href="./css/index.css">
  <script src="../js/jquery.min.js"></script>
</head>

<body>
  <div class="page-container">
    <div class="header">
      <img class="logo" src="../image/lanli-ui/logo.png" alt="" srcset="">
    </div>
    <div class="container">
      <div class="menu">
        <div class="menu-item active" onclick="tab('popup',this)">Pupop</div>
        <div class="menu-item " onclick="tab('dialog',this)">Dialog</div>
        <div class="menu-item" onclick="tab('toast',this)">Toast</div>
        <div class="menu-item" onclick="tab('calendar',this)">Calendar</div>
        <div class="menu-item" onclick="tab('rate',this)">rate</div>
        <div class="menu-item" onclick="tab('picker',this)">picker</div>
        <div class="menu-item" onclick="tab('icon',this)">Icon</div>
        <div class="menu-item" onclick="tab('button',this)">button</div>
        <div class="menu-item" onclick="tab('cell',this)">cell</div>
      </div>
      <div class="content">
        <!----md-->
        <iframe id="md" width="100%" src=""></iframe>

      </div>
      <div class="frame">
        <!----mobile-->
        <div class="mobile">
          <iframe id="ex" src="./example/Icons.html"></iframe>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  tab('popup')

  function tab(type, that) {
    var mdurl = "./document/index.html?type=" + type + "&v=" + Date.now();
    const uname = type.toLowerCase()
    
    var exurl = "./example/lanliui/index.html#/" + uname + "?v=" + Date.now();
    var md = document.getElementById("md")
    var ex = document.getElementById("ex")
    md.src = mdurl;
    ex.src = exurl;
    if (that) {
      $('.menu-item').removeClass('active')
      $(that).addClass('active')
    }
  }
</script>

</html>